import 'package:bottom_drawer/bottom_drawer.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:gameplay_flutter/lib_baseview/lib_baseview.dart';
import 'package:gameplay_flutter/lib_runtime/extension/widget/widget_wrapper.dart';
import 'package:get/get_core/src/get_main.dart';
import 'package:ones/ui.dart';
import 'package:provider/provider.dart';

import '../../../generated/assets.dart';
import '../../../lib_baseview/theme/jr.dart';
import '../../../lib_baseview/widget/empty_view/jr_empty_view.dart';
import '../../../m_login/select_country/select_country_model.dart';
import '../../../resource/language/generated/l10n.dart';
import '../home_countries/home_countries.dart';

class DrawerList extends StatefulWidget {
  final callback;
  final controller;
  final bool isOpen;
  DrawerList({ Key? key, this.callback, required this.controller, required this.isOpen, }) : super(key: key);

  @override
  _DrawerList createState() => _DrawerList();
}

class _DrawerList extends State<DrawerList> {
  int selectIndex = -1;
  final double _headerHeight = 60.0;
  final BottomDrawerController _controller = BottomDrawerController();



  @override
  void initState() {
    super.initState();
    widget.controller.attach(openOrClose);
    _controller.close();
  }

  @override
  void dispose() {
    super.dispose();
    widget.controller.detach();
  }

  void openOrClose(){
    if(widget.isOpen){
      open();
    } else {
      close();
    }
  }


  void open(){
    _controller.open();
  }

  void close(){
    _controller.close();
  }

  @override
  Widget build(BuildContext context) {
    return _buildBottomDrawer(context);
  }

  Widget _buildBottomDrawer(BuildContext context) {
    return BottomDrawer(
      followTheBody:false,
      header: _buildBottomDrawerHead(context),
      body: _buildBottomDrawerBody(context),
      headerHeight: _headerHeight,
      drawerHeight: 1050,
      color: widget.isOpen?Colors.black.withOpacity(.15):Colors.transparent,
      controller: _controller,
      boxShadow:const [
        BoxShadow(
          color: Colors.transparent,
          blurRadius: 10,
          spreadRadius: 5,
          offset: const Offset(2, -1), // changes position of shadow
        ),
      ],
    );
  }

  Widget _buildBottomDrawerHead(BuildContext context) {
    return Column(
      children: [
        InkWell(
          onTap: (){
            close();
          },
          child:  SizedBox(
              width: MediaQuery.sizeOf(context).width,
              height: 280
          ),
        ),
        Container(
          height: _headerHeight,
          decoration: const BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(topLeft: Radius.circular(18),topRight: Radius.circular(18))
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const SizedBox(width: 10,),
              const Image(image: AssetImage(Assets.homeCancel),width: 12,height: 12,).onTap((){
                close();
              }),
              const Spacer(),
              Text(T.current.h3_countries,style: const TextStyle(
                  fontSize: 18
              ),),
              const Spacer()
            ],
          ),
        )
      ],
    );
  }

  Widget _buildBottomDrawerBody(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      height: 500.0,
      child: SingleChildScrollView(
        child: _buildButtons(),
      ),
    );
  }

  Widget _buildButtons() {
    return  ChangeNotifierProvider(
        create: (_) => SelectCountryModel(),
        child: Consumer<SelectCountryModel>(
          builder: (context, model, _)  {
            final filteredList =  model.countryList;
            return Column(
              children: [
                listWidget(context, model, filteredList),
                const SizedBox(height: 80,)
              ],
            ).colorBg(bgColor: Colors.white);
          },
        )
    ) ;
  }

  Widget listWidget(context, model, filteredList){
    if (model.countryList.isEmpty) {
      return JREmptyView(
        desc: T.current.go_to_get_your_car,
      );
    }
    return Column(
      children: List.generate(filteredList.length, (index) => getItem(filteredList[index],index)),
    );
  }

  Widget getItem(item,index) {
    return Container(
      margin: const EdgeInsets.fromLTRB(10, 5, 10, 5),
      padding:  const EdgeInsets.fromLTRB(30, 8, 30, 8),
      decoration: BoxDecoration(
        color: selectIndex == index?const Color(0xffE5DFFF) : const Color(0xffF4F3F6),
        borderRadius: const BorderRadius.all(Radius.circular(4))
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            children: [
              Image.network(
                item.flag,
                width: 42.w,
                height: 30.h,
                fit: BoxFit.fill,
              ),
              const SizedBox(width: 20,),
              Text(item.country?.toLowerCase() ?? '').color(selectIndex == index? const Color(0xff444444) : const Color(0xffA8A8A8)).fontSize(16),
              const SizedBox(width: 20,),
            ],
          ),
          selectIndex == index? const Icon(Icons.check_circle_outline,color: Color(0xff8A72FE),size: 28,) : Container()
        ],
      ).center(),
    ).onTap((){
      setState(() {
        selectIndex = index;
        Get.to(HomeCountriesPage( country: item.country,));
        close();
        selectIndex = -1;
      });
    });
  }


}